import React, { useState, useEffect } from 'react';
import { Pie, G2 } from '@ant-design/plots';
import { Skeleton } from 'antd';
import { axiosAjax } from '../../services/analysisAxios';
import { getMonth } from './tools';

export default function MonthPage() {
  const [dataTotal, setDataTotal] = useState([]);
  const [loaded, setLoaded] = useState(false);
 
  const allCommityTotal = async () => {
    // 获取本月起止时间
    let month = getMonth();
    // 获取所有下单商品的信息
    let data = await axiosAjax('get', '/analysis/allorderByTime');
    // 存储每种商品类型的销售额
    let total = [];
    if (data.data.length > 0) {
      total = data.data.map(item => {
        return {
          type: item.name,
          value: 0
        }
      });
      for (let i = 0; i < data.data.length; i++) {
        for (let m = 0; m < total.length; m++) {
          if (data.data[i].name === total[m].type && data.data[i].arr.length > 0) {
            for (let j = 0; j < data.data[i].arr.length; j++) {
              let riqi = data.data[i].arr[j].time.split('-').join('');
              // 符合当前时间所在月的订单商品
              if (riqi >= month[0] && riqi <= month[1] && data.data[i].arr[j].commodity.price && data.data[i].arr[j].commodity.sale) {
                total[m].value += parseInt(data.data[i].arr[j].commodity.price) * parseInt(data.data[i].arr[j].commodity.sale);
              }
            }
          }
        }
      }
    }
    setDataTotal([
      {
        type: '可乐',
        value: 4000,
      },
      {
        type: '雪碧',
        value: 5000,
      },
      ...total,
      {
        type: '奶茶',
        value: 4000,
      },
      {
        type: '啤酒',
        value: 5000,
      }]);
      setLoaded(true);
  }
 
  useEffect(() => {
    allCommityTotal();
  }, []);

  if (!loaded) {
    return <div>
      <Skeleton
        active
        title={{width:0}}
        paragraph={{
          rows: 10,
          width: [570, 770, 770, 770, 770, 770, 770, 770, 670]
        }} />
    </div>
  }
  const G = G2.getEngine('canvas');
  const cfg = {
    appendPadding: 10,
    data: dataTotal,
    angleField: 'value',
    colorField: 'type',
    radius: 0.75,
    legend: false,
    label: {
      type: 'spider',
      labelHeight: 40,
      formatter: (data, mappingData) => {
        const group = new G.Group({});
        group.addShape({
          type: 'circle',
          attrs: {
            x: 0,
            y: 0,
            width: 40,
            height: 50,
            r: 5,
            fill: mappingData.color,
          },
        });
        group.addShape({
          type: 'text',
          attrs: {
            x: 10,
            y: 8,
            text: `${data.type}`,
            fill: mappingData.color,
          },
        });
        group.addShape({
          type: 'text',
          attrs: {
            x: 0,
            y: 25,
            text: `${data.value}元 ${(data.percent * 100).toFixed(2)}%`,
            fill: 'rgba(0, 0, 0, 0.65)',
            fontWeight: 700,
          },
        });
        return group;
      },
    },
    interactions: [
      {
        type: 'element-selected',
      },
      {
        type: 'element-active',
      },
    ],
  };
  const config = cfg;
  return (
    <div>
      <Pie {...config} />
    </div>
  )
}